<template>
  <div id="createForm">
    <div>

      <brief
          :gamename="gamename"
          :gameinfo="gameinfo"
          :inForm="true"
      ></brief>

      <el-input class="new-project-inp" v-model="gamename" placeholder="* 游戏名称" type="text"></el-input>
      <el-input class="new-project-inp" v-model="gameinfo" placeholder="游戏简介" type="text"></el-input>

      <div class="operator-teamwork">
        <el-button :class="personal" @click="selectPersonal"><i class=" iconfont icon-wangzhantubiaoji2_huaban1fuben24"> <span
            class="text">个人开发</span></i></el-button>
        <el-button :class="teamwork" @click="selectTeamwork"><i
            class=" iconfont icon-jishuhezuoqiatanhezuohuitan"> <span
            class="text"> 合作开发</span></i></el-button>

      </div>
      <el-select v-model="continuation" placeholder="游戏续作(默认非续作)" class="new-project-inp" style="margin-bottom: 30px">
        <el-option label="游戏续作(默认非续作)" key='' value=" "></el-option>
        <el-option label="游戏1" key='游戏1' value="游戏1"></el-option>
        <el-option label="游戏2" key='游戏2' value="游戏2"></el-option>
        <el-option label="游戏3" key='游戏3' value="游戏3"></el-option>
        <el-option label="游戏4" key='游戏4' value="游戏4"></el-option>
        <el-option label="二创游戏" key='二创游戏' value="二创游戏"></el-option>
      </el-select>

      <el-select v-model="flagopen" v-show="continuation != '二创游戏'" placeholder="二创许可(默认完全不允许)" class="new-project-inp"
                 style="margin-bottom: 30px">

        <el-option label="完全不允许" key='完全不允许' value="完全不允许"></el-option>
        <el-option label="完全允许" key='完全允许' value="完全允许"></el-option>
        <el-option label="授权" key='授权' value="授权"></el-option>
        <el-option label="令牌" key='令牌' value="令牌"></el-option>
      </el-select>
      <el-input class="new-project-inp" v-model="game_second_maker_code" placeholder="原作编号(默认:原作非本平台的二创游戏)" type="text" v-show="continuation == '二创游戏'"></el-input>

      <el-input class="new-project-inp" placeholder="输入你的令牌" type="text" v-model="gametoken"
                v-show="flagopen == '令牌' && continuation != '二创游戏'"/>

      <div style="clear: both"></div>
      <el-button class="help-btn">讲解</el-button>
      <el-button class="new-project-btn">下一步</el-button>
    </div>
  </div>
</template>

<script>

import brief from "@/components/molecule/project/projectDetail/brief"

export default {
  name: "createForm",
  data() {
    return {
      continuation: "",
      flagopen: "",
      teamwork: "unactive",
      personal: "active",
      dialogVisible: false,
      gamename: "",
      gameinfo: "",
      game_second_maker_code: "",
      gametoken: ""

    }
  },
  methods: {

    selectTeamwork() {
      this.teamwork = "active";
      this.personal = "unactive"
    },
    selectPersonal() {
      this.teamwork = "unactive"
      this.personal = "active"
    }
  },
  components: {
    brief
  }
}
</script>

<style scoped lang="less">
@width: 150%;
.unactive {
  background-color: #26A2C1;
  color: wheat;
  font-size: 15px;
  border: none;
  transition: .5s;
}

.active {
  transition: .5s;
  background-color: #e274ad;
  color: wheat;
  font-size: 15px;
  border: none;
}

.operator-teamwork {
  .iconfont {
    font-size: 40px;

    .text {
      position: relative;
      top: -7px;
      font-size: 17px;
    }
  }
}

#createForm {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to right, #26A2C1, #48cb12);;
  height: 100vh;
}

.operator-teamwork {
  text-align: center;
  width: @width;
}

.form-title {
  color: wheat;
}

.help-btn {
  float: left;
  background-color: saddlebrown;
  border: none;
  color: whitesmoke;
  width: 100px;
}

.new-project-btn {
  width: 100px;
  float: right;
  position: relative;
  right: -50%;
  background-color: palegreen;
  outline: none;
  border: none;
  color: saddlebrown;
}

.new-project-inp {
  display: block;
  outline: none;
  width: @width !important;
  margin: 20px 0px;
  height: 30px;
  padding-left: 10px;
  transition: 1s;

  &:focus {
    width: 200% !important;
  }
}

</style>